<template>
  <div class='echartsone' :style="{height:fullHeights+'px'}">
    <div id="echarts_one" :style="{height:fullHeight+'px'}"></div>
  </div>
</template>
<script type="module">
  module.exports = {
    name: "echarts_one",
    data() {
      return {
        fullHeight: document.documentElement.clientHeight - 260,
        fullHeights: document.documentElement.clientHeight - 168,
        streetroutelist: [],
        data: []
      }
    },
    mounted() {
      this.echartsdata();
    },
    methods: {
      bianli(arr, array, val) {
        arr.forEach((v, i) => {
          array.push(
            Object.assign(v, {
              depth: val
            })
          )
        })
        return array;
      },
      splitarrays(arrs, num) {
        let newArrs = [];
        for (let i = 0; i < arrs.length; i += num) {
          newArrs.push(arrs.slice(i, i + num));
        }
        return newArrs;
      },
      convertKey(arr, key) {
        let newArr = [];
        arr.forEach((item, index) => {
          let newObj = {};
          for (var i = 0; i < key.length; i++) {
            newObj[key[i]] = item[Object.keys(item)[i]]
          }
          newArr.push(newObj);
        })
        return newArr;
      },
      get(url, params) {
        return new Promise((resolve, reject) => {
          axios.get('./js/echarts_one.json')
            .then(response => {
              resolve(response);
            })
            .catch(err => {
              reject(err);
            })
        })
      },
      async echartsdata() {
        let datas = await this.get();
        let streetroute = datas.data;
        var myChart = echarts.init(document.getElementById('echarts_one'));
        let color = ['#78b4ff', '#f66bc7', '#2bcba7', '#ff8896', '#79c628', '#6c93ee', '#a9abff', '#f7a23f',
          '#27bae7', '#ff6d9d', '#cb79ff', '#f95b5a', '#ccaf27', '#38b99c', '#93d0ff', '#bd74e0', '#fd77da',
          '#dea700'
        ];
        let clstreet = streetroute.filter((val, index, arr) => {
          return val['街道'] === "长芦街道";
        })
        let gtstreet = streetroute.filter((val, index, arr) => {
          return val['街道'] === "葛塘街道";
        })
        let pcstreet = streetroute.filter((val, index, arr) => {
          return val['街道'] === "盘城街道";
        })
        let clnum = Math.ceil(clstreet.length / 2);
        let gtnum = Math.ceil(gtstreet.length / 2);
        let pcnum = Math.ceil(pcstreet.length / 2);
        let clarray = this.splitarrays(clstreet, clnum);
        let gtarray = this.splitarrays(gtstreet, gtnum);
        let pcarray = this.splitarrays(pcstreet, pcnum);
        let source = clarray[0].concat(gtarray[0], pcarray[0]);
        let target = clarray[1].concat(gtarray[1], pcarray[1]);
        let sources = this.convertKey(source, ['source', 'target']);
        let targets = this.convertKey(target, ['target', 'source']);
        let sourcesnum = Math.ceil(sources.length / 3);
        let targetsnum = Math.ceil(targets.length / 3);
        let sourcesarray = this.splitarrays(sources, sourcesnum);
        let targetsarray = this.splitarrays(targets, targetsnum);
        let sourcearr1 = [];
        let sourcearr2 = [];
        let sourcearr3 = [];
        let targetarr1 = [];
        let targetarr2 = [];
        let targetarr3 = [];
        this.bianli(sourcesarray[0], sourcearr1, 4);
        this.bianli(sourcesarray[1], sourcearr2, 5);
        this.bianli(sourcesarray[2], sourcearr3, 6);
        this.bianli(targetsarray[0], targetarr1, 0);
        this.bianli(targetsarray[1], targetarr2, 1);
        this.bianli(targetsarray[2], targetarr3, 2);
        let array = sourcearr1.concat(sourcearr2, sourcearr3, targetarr1, targetarr2, targetarr3);
        array.forEach((v, i) => {
          this.data.push({
            target: v.target,
            source: v.source,
            value: 10,
            lineStyle: {
              color: 'source',
              opacity: 0.3
            }
          })          
          this.streetroutelist.push({
            name: v.target,
            depth: v.depth,
            itemStyle: {
              color: '#0E4289'
            }
          })
          this.streetroutelist.push({
            name: v.source,
            depth: v.depth,
            itemStyle: {
              color: '#0E4289'
            }
          })
        })
        let hash = {};
        this.streetroutelist = this.streetroutelist.reduce(function(arr, current) {
          hash[current.name] ? '' : hash[current.name] = true && arr.push(current);
          return arr
        }, [])
        this.streetroutelist.forEach((v, i) => {
          if (v['name'] == "长芦街道") {
            v['depth'] = '3'
            v['itemStyle'].color = '#78b4ff'
          }
          if (v['name'] == "葛塘街道") {
            v['depth'] = '3'
            v['itemStyle'].color = '#f66bc7'
          }
          if (v['name'] == "盘城街道") {
            v['depth'] = '3'
            v['itemStyle'].color = '#2bcba7'
          }
          return v;
        })
        this.data.forEach((v, i) => {
          if (v['target'] == "长芦街道" || v['target'] == "葛塘街道" || v['target'] == "盘城街道") {
            v['lineStyle'].color = "target"
          }
          return v
        })
        var option = {
          backgroundColor: '',
          tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove',
            formatter: function(o) {
              if (o.dataType !== "edge") {
                return '';
              }
              return o.data.source + ' - ' + o.data.target
            }
          },
          series: [{
            type: 'sankey',
            data: this.streetroutelist,
            links: this.data,
            left: '0%',
            top: '0%',
            right: '0%',
            bottom: '0%',
            nodeWidth: 120,
            nodeGap: 15,
            focusNodeAdjacency: 'allEdges',
            itemStyle: {
              normal: {
                borderWidth: 0,
                borderColor: '#fff',
                opacity: 1
              }
            },
            label: {
              normal: {
                align: 'center',
                padding: [0, 0, 0, -130],
                fontSize: '12',
                color: '#fff'
              }
            },
            lineStyle: {
              normal: {
                curveness: 0.5,
                opacity: 0.5
              }
            }
          }]
        };
        myChart.setOption(option);
        window.onresize = function() {
          myChart.resize();
        }
      }
    }
  }
</script>
